uniapp控制data字段来控制元素显示隐藏

2023-07-16 18:33| 来源: 网络整理| 查看: 265

在这里插入图片描述

今天遇到了一个界面的数据是一个json数据实现的动态绑定，里面有对应的字符串绑定或者数组遍历，但是其的状态是根据data中的数据是否为空来控制”完成“和”未完成“的显示状态的。

vue 提倡状态驱动界面，用data里面字段，控制界面的组件显示或者隐藏就非常合理了。不同字段对应的不同的显示逻辑，也就很合理了。

数据为单个字符串时：

{{info}} 暂时没有数据...

数据为数组或者对象时：

{{item}} 暂时没有数据...

不过还可以不要将这些放在v-if=""中，使用计算属性或函数控制。。。

dom增加属性

内容内容

data中增加isShow默认值

data() { return{ isShow: "domhide", } }

在style中声明domhide和domshow两个class

.domhide{display: none;} .domshow{display: block;}

在load中增加计时程序

onLoad() { if (this.timer) { clearInterval(this.timer); } this.timer = setInterval(() => { this.isShow= "domshow"; }, 5000); },

uniapp中实现文本行数/高度超过隐藏就并显示更多按钮

uni.createSelectorQuery()返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。selectorQuery.selectAll(selector)在当前页面下选择匹配选择器 selector 的所有节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。 Q{{index+1}}: {{item.title}} {{item.content}} 展开收起 import { problem } from '@/api/user.js' export default { data() { return { // 多个文本数据列表 list: [], // 每个文本的信息 elData: [], } }, mounted() { this.getProblem() }, methods: { getProblem() { // 获取文本信息的api接口 problem problem().then(res => { this.list = res.data.list; // 等待渲染完成在获取页面元素信息 this.$nextTick(() => { let el = uni.createSelectorQuery().selectAll('.desc') el.boundingClientRect(res => { console.log(res) // 拿到类名为 desc 的全部元素信息 this.elData = res; }).exec() }) }) }, } } page { background-color: #FFFFFF; } .problem { padding: 0 30rpx; } .card-box { box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1); margin: 40rpx 0 0 0; border-radius: 10rpx; padding: 40rpx 30rpx 0 30rpx; } .title { font-weight: 500; font-size: 30rpx; color: #101010; } .desc { font-weight: 300; font-size: 26rpx; color: #333; padding-bottom: 30rpx; } .desc .inline { overflow: hidden; } .open { color: #999; font-weight: 300; background-color: #FFFFFF; padding: 0 20rpx 35rpx; }

transition过渡效果

transition: 1s; // 过渡效果时间 transition: width 1s ,height 2s ,background 3s; // 宽度1s完成变化，高度2s完成变化，背景色3s完成变化

uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果

实现思路：通过小程序API中的触摸事件，配合CSS来实现元素的显示和隐藏。ps（也想过另一种通过监听页面滚动的方式来实现，不过效果一定很差0.0）

我是要发生变化的元素 data() { return { specClass: 'hide', }; }, methods:{ handletouchstart() { this.specClass = 'show'; }, handletouchend() { this.specClass = 'hide'; },} .popupfx { position: fixed; top: 80%; right: 20upx; z-index: 10; &.show { animation: showLayer 0.2s linear both; } &.hide { animation: hideLayer 0.2s linear both; } @keyframes showLayer { 0% { transform: translateX(0%); } 100% { transform: translateX(80upx); //这里可以通过变大变小调整偏移量 } } @keyframes hideLayer { 0% { transform: translateX(80upx); } 100% { transform: translateX(0); } } }

uniapp父组件控制显示隐藏

我们开发uniapp时会用到uview的组件,很方便,但项目中可能会对组件进行二次修改,设置成时候自己项目的功能、样式,如果多处需要用到,可能需要进行二次封装,这时候就会涉及到父子传参等问题,这篇文章主要是为了记录解决父组件控制子组件的显示隐藏问题,下面以u-popup组件为例吧!

收款: ￥520.00 取消 {{item.name}} export default { name:"payment", props: { showModal:{ type:Boolean, } }, data() { return { show: false, //弹出框显示状态 modeOfPayment: [{ image: '../static/settleAccounts/weixin.png', name: '微信' },{ image: '../static/settleAccounts/zhifubao.png', name: '支付宝' },{ image: '../static/settleAccounts/yue.png', name: '余额' }], }; }, watch:{ //因为是单项数据流,v-modal控制的组件显示隐藏,父组件不可以通过props内的参数直接改变子元素参数,所以我们通过watch来监控数据的变化,间接修改show的数据 showModal(val) { this.show=val } }, methods:{ onClose(){ this.show=false this.$emit('close',this.show) //通知父组件隐藏了 }, } } 点击显示 import payment from "../../components/payment.vue" export default { data() { return { showPay:false,//显示支付方式 } }, components: { payment }, methods:{ onclose(show){ this.showPay=show console.log(show,"子组件传过来的值----") }, showPay(){ this.showPay=true //传给子组件动态控制显示隐藏 } } }

在这里插入图片描述

【本文地址】

公司简介

联系我们